<template>
  <div class="md:flex boxx">
    <template v-if="status == 1">
      <template
        v-for="(item, index) in growCardList"
        :key="item.title"
        v-if="growCardList.length != 0"
      >
        <Card
          size="small"
          :loading="loading"
          :title="item.title"
          class="md:w-1/3 w-full !mt-3 boxxchildren"
          :class="[index + 1 < 4 ]"
          :canExpan="false"
          @click="gopage(item.ip)"
        >
          <template #extra>
            <Tag :color="item.color">{{ item.action }}</Tag>
          </template>
          <div class="py-4 px-4 flex justify-between">
            <span class="spanh1">{{ item.name }}</span>
            <Icon
              icon="subway:cercle-8"
              color="#52c41a"
              class="spanh2"
              :size="16"
              v-if="item.status == 1"
            />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </div>

          <div class="p-2 px-4">
            <div
              ><span class="spanh1">{{ item.ip }}</span></div
            >
            <div class="itembox"
              ><span>{{ t('routes.demo.inet.type') }}：{{ item.mtype }}</span></div
            >
          </div>
        </Card>
      </template>
      <div class="notice1" v-else>
        当前无可用的解调器,
        <span class="spanf1" @click="go_add">立即添加</span>
      </div>
    </template>
    <template v-else>
      <div class="notice1"> </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, onMounted, reactive, ref, Ref } from 'vue';
import { CountTo } from '/@/components/CountTo/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage';
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
//import { growCardList } from '../data';
import { get_modem } from '/@/api/biz/index';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { S } from 'mockjs';
interface GrowCardItem {
  icon: string;
  title: string;
  value: number;
  total: number;
  color: string;
  name: string;
  action: string;
}
const { t } = useI18n();
defineProps({
  loading: {
    type: Boolean,
  },
});
const status = ref(2);
const go = useGo();
function gopage(ip: string) {
  go('/modems/index?ip=' + ip);
}
function go_add() {
  go('/system/modemSet');
}
let growCardList: GrowCardItem[] = [];
get_modem({})
  .then((res) => {
    status.value = 1;
    const arr = res.data.data.result.data;
    for (let item in arr) {
      growCardList.push(arr[item]);
    }
    console.log(growCardList.length)
  }).catch(() => {
    status.value=2
    //message.error("连接超时，请稍后再试！");
  });
</script>
<style>
.spanh2 {
  position: relative;
  margin-top: 6px;
}
.notice1 {
  width: 100%;
  padding-top: 150px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
.spanf1 {
  color: #05e618;
}
.spanh1 {
  font-size: 17px;
}
.itembox {
  margin-top: 20px;
}
.boxx {
  width: 100%;
   display: flex; 
   /* justify-content: space-between;  */
   flex-wrap: wrap
}
.boxxchildren {
  width: 24%;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>